// LineChart.js?d670:110 Uncaught (in promise) ReferenceError: echarts is not defined
//     at VueComponent.renderLineChart (LineChart.js?d670:110)
import echarts from 'echarts'

export default {
    data() {
        return {
            lineChart: null
        }
    },

    methods: {
        renderLineChart(list) {

            let colorList = [
                    ['#9effff', '#9E87FF', 'rgba(158,135,255, 0.3)', "#9E87FF"],
                    ['#73DD39', '#73DDFF', 'rgba(115,221,255, 0.3)', '#73DDFF'],
                    ['#fe9a', '#fe9a8b', 'rgba(254,154,139, 0.3)', '#fe9a8b']
                ],
                xLabel = [],
                dataObj = {
                    data0: [],
                    data1: [],
                    data2: []
                }

            list.forEach((item, i) => {
                xLabel.push(item.date.substring(5))
                // data0.push(item.received)
                // data1.push(item.receiving)
                // data2.push(item.total)
                dataObj.data0.push(item.received)
                dataObj.data1.push(item.receiving)
                dataObj.data2.push(item.total)
            })

            let series = ['已收', '未收', '应收'].map((_name, i) => {
                return {
                    name: _name,
                    type: 'line',
                    // data: i === 0 ? data0 : i === 1 ? data1 : data2,
                    data: dataObj[`data${i}`], // => dataObj[data0] => dataObj.data0
                    symbolSize: 1,
                    symbol: 'circle',
                    smooth: true,
                    showSymbol: false,
                    lineStyle: {
                        width: 2,
                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: colorList[i][0]
                            },
                            {
                                offset: 1,
                                color: colorList[i][1]
                            }
                        ]),
                        shadowColor: colorList[i][2],
                        shadowBlur: 5,
                        shadowOffsetY: 10
                    },
                    itemStyle: {
                        normal: {
                            color: colorList[i][3],
                            borderColor: colorList[i][3]
                        }
                    }
                }
            })

            let option = {
                legend: {
                    icon: 'circle',
                    top: '5%',
                    right: 'center',
                    itemWidth: 6,
                    itemGap: 20,
                    textStyle: {
                        color: '#556677'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            show: true,
                            backgroundColor: '#fff',
                            color: '#556677',
                            borderColor: 'rgba(0,0,0,0)',
                            shadowColor: 'rgba(0,0,0,0)',
                            shadowOffsetY: 0
                        },
                        lineStyle: {
                            width: 0
                        }
                    },
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#5c6c7c'
                    },
                    padding: [10, 10],
                    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
                },
                grid: {
                    top: '15%'
                },
                xAxis: {
                    type: 'category',
                    data: xLabel,
                    axisLine: {
                        lineStyle: {
                            color: '#DCE2E8'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#556677'
                        },
                        // 默认x轴字体大小
                        fontSize: 12,
                        // margin:文字到x轴的距离
                        margin: 15
                    },
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#DCE2E8'
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#556677'
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                series
                // series: [{
                //         name: '已收',
                //         type: 'line',
                //         data: data0,
                //         symbolSize: 1,
                //         symbol: 'circle',
                //         smooth: true,
                //         showSymbol: false,
                //         lineStyle: {
                //             width: 2,
                //             color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                //                     offset: 0,
                //                     color: '#9effff'
                //                 },
                //                 {
                //                     offset: 1,
                //                     color: '#9E87FF'
                //                 }
                //             ]),
                //             shadowColor: 'rgba(158,135,255, 0.3)',
                //             shadowBlur: 5,
                //             shadowOffsetY: 10
                //         },
                //         itemStyle: {
                //             normal: {
                //                 color: colorList[0],
                //                 borderColor: colorList[0]
                //             }
                //         }
                //     }, {
                //         name: '未收',
                //         type: 'line',
                //         data: data1,
                //         symbolSize: 1,
                //         symbol: 'circle',
                //         smooth: true,
                //         showSymbol: false,
                //         lineStyle: {
                //             width: 2,
                //             color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [{
                //                     offset: 0,
                //                     color: '#73DD39'
                //                 },
                //                 {
                //                     offset: 1,
                //                     color: '#73DDFF'
                //                 }
                //             ]),
                //             shadowColor: 'rgba(115,221,255, 0.3)',
                //             shadowBlur: 5,
                //             shadowOffsetY: 10
                //         },
                //         itemStyle: {
                //             normal: {
                //                 color: colorList[1],
                //                 borderColor: colorList[1]
                //             }
                //         }
                //     },
                //     {
                //         name: '应收',
                //         type: 'line',
                //         data: data2,
                //         symbolSize: 1,
                //         symbol: 'circle',
                //         smooth: true,
                //         showSymbol: false,
                //         lineStyle: {
                //             width: 2,
                //             color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                //                     offset: 0,
                //                     color: '#fe9a'
                //                 },
                //                 {
                //                     offset: 1,
                //                     color: '#fe9a8b'
                //                 }
                //             ]),
                //             shadowColor: 'rgba(254,154,139, 0.3)',
                //             shadowBlur: 5,
                //             shadowOffsetY: 10
                //         },
                //         itemStyle: {
                //             normal: {
                //                 color: colorList[2],
                //                 borderColor: colorList[2]
                //             }
                //         }
                //     }
                // ]
            }

            this.lineChart.setOption(option)
        }
    }
}